<template>
  <div>
    <!-- 咨询详情 -->
    <el-dialog v-model="dialogVisible" title="详情" width="500" :before-close="handleClose">
      <span>
        <div class="row">
          <span class="left">咨询类型：</span>
          <span class="right">{{ruleForm.type}}</span>
        </div>
        <div class="row">
          <span class="left">咨询渠道：</span>
          <span class="right">{{ ruleForm.source }}</span>
        </div>
        <div class="row">
          <span class="left">咨询人：</span>
          <span class="right">{{ ruleForm.name }}</span>
        </div>
        <div class="row">
          <span class="left">联系电话：</span>
          <span class="right">{{ruleForm.mobile}}</span>
        </div>
        <div class="row">
          <span class="left">与老人关系：</span>
          <span class="right">{{ ruleForm.relation }}</span>
        </div>
        <div class="row">
          <span class="left">策划回访日期：</span>
          <span class="right">{{ruleForm.visitTime}}</span>
        </div>
        <div class="row">
          <span class="left">咨询内容：</span>
          <span class="right">{{ ruleForm.content }}</span>
        </div>
        <div class="row">
          <span class="left">登记人：</span>
          <span class="right">{{ ruleForm.addAccountName }}</span>
        </div>
        <div class="row">
          <span class="left">登记时间：</span>
          <span class="right">{{ ruleForm.addTime }}</span>
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getQuestionModel } from '@/api/market/question/question';
import { AddResult } from '@/api/market/question/type';
import { ref, defineEmits, defineProps, onMounted } from 'vue';

const emit = defineEmits(['close'])

//dialog默认显示
const dialogVisible = ref(true)

const props = defineProps({
  id: Number
})

const ruleForm = reactive<AddResult>({
  id: 0,
  companyId: 0,
  customerId: 0,
  type: "",
  source: "",
  name: "",
  mobile: "",
  relation: "",
  visitTime: "",
  content: "",
  addTime: "",
  state: 0,
  addAccountId: 0,
  customerName: "",
  addAccountName: "",
  stateName: ""
})

//取消
const handleClose = () => {
  emit('close')
}

const getDetail = async (id: number) => {
  let res = await getQuestionModel(id);
  if (res) {
    Object.assign(ruleForm, res)
  }
}

onMounted(() => {
  if (props.id) {
    getDetail(props.id);
  }
})
</script>

<style scoped>
.row {
  margin-bottom: 18px;
  height: 32px;
  display: flex;

  .left {
    display: block;
    width: 100px;
    text-align: right;
    margin-left: 18px;
  }

  .right {
    margin-left: 58px;
  }
}
</style>